import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Row,
  Col,
  Card,
  Icon,
  Tooltip,
  Form,
  Input,
  Tree,
  message,
  Modal,
  Spin,
  Select,
  TreeSelect, Tag,
  Dropdown, Button,Menu
} from 'antd';
import moment from 'moment';
// import { Menu, Item, Separator, Submenu, MenuProvider } from 'react-contexify';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageLoading from '@/components/PageLoading';
import styles from './index.less';
import sort from '../../../../assets/icons/sort.png';
import start from '../../../../assets/icons/start.png';
import move from '../../../../assets/icons/移动.png';
import qiyon from '../../../../assets/icons/启用.png';
import icon1 from '@/assets/overview/1.png';
import icon2 from '@/assets/overview/2.png';
import icon3 from '@/assets/overview/3.png';
import icon4 from '@/assets/overview/4.png';
import icon5 from '@/assets/overview/5.png';
import icon6 from '@/assets/overview/6.png';
import icon7 from '@/assets/overview/7.png';
import icon8 from '@/assets/overview/8.png';
import chu from '@/assets/overview/chu.png';
import jin from '@/assets/overview/jin.png';
import menuImg from '@/assets/knowledge/menu.png';
import searchImg from '@/assets/knowledge/search.png';
import add1Img from '@/assets/knowledge/add1.png';
import edit1Img from '@/assets/knowledge/edit1.png';
import delete1Img from '@/assets/knowledge/delete1.png';
import up1Img from '@/assets/knowledge/up1.png';
import down1Img from '@/assets/knowledge/down1.png';
import stop1Img from '@/assets/knowledge/stop1.png';
import start1Img from '@/assets/knowledge/start1.png';
// import 'react-contexify/dist/ReactContexify.min.css';

const { TreeNode } = Tree;
const FormItem = Form.Item;
const TreeNodes = TreeSelect.TreeNode;



class LeftTree extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataTree: [],
      iconJudge: true,
      defaultExpandAll: true,
      selectedKeys: null,
      path: '', // 父节点名称
      parentPath: '',
      disabled: null,
      disablex: null,
      showModel: false,
      cid: null,
      title: '',
      login: false,
      moveShow: false,
      value: undefined,
      parentPathMove: '',
      targetRobotId: '',
      open: [],
      openB: [],
      dataTreeB: [],
      selectedKeysB: null,
      pathB: '',
      parentPathB: '',
      cidB: null,
      titleB: '',
      targetRobotIdB: '',
      buttonDJ: false,
      buttonNonew: false,
      qaListCz: '',
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      dataList:[]
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    // console.log(nextProps, nextContext)
    if (nextProps.qaListCz !== this.state.qaListCz) {
      console.log('tcx');
      this.setState({ qaListCz: nextProps.qaListCz });
      this.fetch();
    }
  }

  getMenu=(id,name)=>{
    return(
      <Menu onClick={(e)=>this.handleMenuClick(e,id,name)}>
        <Menu.Item key="1">
          <img src={add1Img} height={18} style={{marginRight:10}} />
          添加分类
        </Menu.Item>
        <Menu.Item key="2">
          <img src={edit1Img} height={18} style={{marginRight:10}} />
          修改名称
        </Menu.Item>

        {this.state.disabled === true ?
          <Menu.Item key="3">
            <img src={start1Img} height={18} style={{marginRight:10}} />
            启用分类
          </Menu.Item>
          :
          <Menu.Item key="3">
            <img src={stop1Img} height={18} style={{marginRight:10}} />
            停用分类
          </Menu.Item>
        }
        <Menu.Item key="4">
          <img src={up1Img} height={18} style={{marginRight:10}} />
          上移分类
        </Menu.Item>
        <Menu.Item key="5">
          <img src={down1Img} height={18} style={{marginRight:10}} />
          下移分类
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="6">
          <img src={delete1Img} height={18} style={{marginRight:10}} />
          删除分类
        </Menu.Item>
      </Menu>
    )
  };


  handleMenuClick=(e,id,name) =>{
   setTimeout(()=>{
     this.setState({
       title:name
     },()=>{
       switch (e.key) {
         case '1':
           return this.addsName(id);
         case '2':
           return this.revisionName();
         case '3':
           return this.disableCategory();
         case '4':
           return this.upOrDownCategory(0);
         case '5':
           return this.upOrDownCategory(1);
         default:
           return this.deleteCategory()
       }
     })
   },300)
  };

  fetch = () => {
    this.setState({ login: true });
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'leftTree/fetch',
        payload: {},
        callback: res => {
          console.log('树形图列表', res);
          const a = [];
          let b = [];
          a.push(res[0]);
          if (res[1]) {
            b = res[1].children;
          } else {
            b = [];
          }

          const temp = a;
          this.setState(
            {
              dataTree: temp,
              dataTreeB: b,
              login: false,
            },
            () => {
              this.generateList(temp)
            }
          );
        },
      });
    });
  };

  componentWillMount() {
    this.setState({ login: true });
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'leftTree/fetch',
        payload: {},
        callback: res => {
          const temp = res;
          this.openedTreeNodes(temp);
          this.fetch();
        },
      });
    });
  }

  componentDidMount() {}

  openedTreeNodes(data) {
    return data.map(item => {
      const a = this.state.open;
      if (item.children) {
        if (item.data.opened) {
          a.push(item.id);
        }
        this.openedTreeNodes(item.children);
      }
      this.setState({ open: a }, () => {
        // console.log(this.state.open)
      });
    });
  }

  onSelect = (selectedKeys, info) => {
    const arr = this.state.dataTreeB;
    this.setState({ dataTreeB: [] });
    setTimeout(() => {
      this.setState({ dataTreeB: arr });
    }, 1);
    const a = selectedKeys[0];
    console.log(selectedKeys,info,'--------------树选择',a);
    if (a) {
      const numbers = a.lastIndexOf('-');
      const b = a.slice(numbers + 1);
      const c = a.slice(0, numbers);
      if (info.node._reactInternalFiber.pendingProps.tcx) {
        if (info.node._reactInternalFiber.pendingProps.tcx.path === '/') {
          this.setState({ buttonDJ: true }); // 判断选中所有分类按钮是否禁用
        } else {
          this.setState({ buttonDJ: false }); // 判断选中所有分类按钮是否禁用
        }
        const str = info.node._reactInternalFiber.pendingProps.tcx.path;
        if (str.split('/').length > 5) {
          this.setState({ buttonNonew: true }); // 判断选中所有分类按钮是否禁用
        } else {
          this.setState({ buttonNonew: false });
        }
        console.log( info.node._reactInternalFiber.pendingProps.title.props.children[0].props.children,'--------title');
        const name =  info.node._reactInternalFiber.pendingProps.title.props.children[0].props.children;
        const { disabled, parentPath, path } = info.node._reactInternalFiber.pendingProps.tcx;
        const  title  = info.node._reactInternalFiber.pendingProps.title.props.children[0].props.children;
        console.log(info, '-----------------------------info', selectedKeys);
        // console.log(info.node._reactInternalFiber.pendingProps);
        this.setState({
          path,
          parentPath,
          disabled,
          cid: b,
          targetRobotId: c,
          selectedKeys:a
        });
        this.props.terrNodeId(a, name, info.node.props.tcx.path);
      }
    }
  };

  onSelects = (selectedKeys, info) => {
    const a = selectedKeys;
    console.log(info.props.eventKey, '移动id'); // 节点id
    if (a) {
      this.setState({ yidongid: info.props.eventKey });
    }
  };

  onClick=(event, props,type)=>{
    console.log(event,props,type);
    const {id,name} = props;
    this.setState({
      title:name
    },()=>{
      switch (type) {
        case 'add':
          return this.addsName(id);
        case 'edit':
          return this.revisionName();
        case 'open':
          return this.disableCategory();
        case 'stop':
          return this.disableCategory();
        case 'up':
          return this.upOrDownCategory(0);
        case 'down':
          return this.upOrDownCategory(1);
        default:
          return this.deleteCategory()
      }
    })
  };

  renderMenu=(id,name)=>{
    return (
      <div className={styles.menuItem}>
        <span className={styles.menuTitle}>{name}</span>
        <Dropdown overlay={(e)=>this.getMenu(id,name)} trigger={['click']} className={styles.menuGroup} placement="bottomLeft">
          <img src={menuImg} height={18} style={{marginLeft:10}} className={styles.tool} />
        </Dropdown>
        {/*<MenuProvider id="menu_id" event="onClick" style={{  display: 'inline-block' }}>
              <img src={menuImg} height={18} style={{marginLeft:10}} className={styles.tool} />
            </MenuProvider>
            <MyAwesomeMenu id={id} name={name} />*/}
      </div>
    );
  };

  renderTreeNodes(data) {
    const that = this;
    const {searchValue} = that.state;

    return data.map(item => {
      // disabled
      const index = item.text.indexOf(searchValue);
      const beforeStr = item.text.substr(0, index);
      const afterStr = item.text.substr(index + searchValue.length);
      const title =
        index > -1 ? (
          <span>
            {beforeStr}
            <span style={{ color: '#f50' }}>{searchValue}</span>
            {afterStr}
          </span>
        ) : (
          <span>{item.text}</span>
        );
      const MyAwesomeMenu = (id) => (
        <Menu id='menu_id'>
          <Item onClick={(e)=>that.onClick(e,id,'add')}> <img src={add1Img} height={18} style={{marginRight:10}} />
            添加分类
          </Item>
          <Item onClick={(e)=>that.onClick(e,id,'edit')}>  <img src={edit1Img} height={18} style={{marginRight:10}} />
            修改名称
          </Item>
          {
            this.state.disabled === true ?
              <Item onClick={(e)=>that.onClick(e,id,'open')}> <img src={start1Img} height={18} style={{marginRight:10}} />
                启用分类
              </Item>
              :
              <Item onClick={(e)=>that.onClick(e,id,'stop')}> <img src={stop1Img} height={18} style={{marginRight:10}} />
                停用分类
              </Item>
          }
          <Item onClick={(e)=>that.onClick(e,id,'up')}> <img src={up1Img} height={18} style={{marginRight:10}} />
          上移分类
          </Item>
          <Item onClick={(e)=>that.onClick(e,id,'down')}> <img src={down1Img} height={18} style={{marginRight:10}} />
          下移分类
          </Item>
          <Separator />
          <Item onClick={(e)=>that.onClick(e,id,'del')}> <img src={delete1Img} height={18} style={{marginRight:10}} />
          删除分类
          </Item>
        </Menu>
      );
      function status(id,name) {
        return (
          <div className={styles.menuItem}>
            <span className={styles.menuTitle}>{title}</span>
             <Dropdown overlay={(e)=>that.getMenu(id,name)} trigger={['click']} className={styles.menuGroup} placement="bottomLeft">
              <img src={menuImg} height={18} style={{marginLeft:10}} className={styles.tool} />
            </Dropdown>
            {/*<MenuProvider id="menu_id" event="onClick" style={{  display: 'inline-block' }}>
              <img src={menuImg} height={18} style={{marginLeft:10}} className={styles.tool} />
            </MenuProvider>
            <MyAwesomeMenu id={id} name={name} />*/}
          </div>
        );
      }
      if (item.children) {
        if (item.data.disabled) {
          return (
            <TreeNode className="glo" title={that.renderMenu(item.id,item.text)} key={item.id} tcx={item.data}>
              {that.renderTreeNodes(item.children)}
            </TreeNode>
          );
        } 
          return (
            <TreeNode title={that.renderMenu(item.id,item.text)} key={item.id} tcx={item.data}>
              {that.renderTreeNodes(item.children)}
            </TreeNode>
          );
        
      }
      return (
        <div>
          <TreeNode title={that.renderMenu(item.id,item.text)} key={item.id} tcx={item.data} />
          <Icon type="file-text" theme="filled" style={{fontSize:15,color:"skyblue"}} />
        </div>
      );
    });
  }

  onSelectB = (selectedKeys, info) => {
    const arr = this.state.dataTree;
    this.setState({ dataTree: [] });
    setTimeout(() => {
      this.setState({ dataTree: arr });
    }, 1);

    const a = selectedKeys[0];
    console.log(a, info); // 节点id
    if (a) {
      const numbers = a.lastIndexOf('-');
      const b = a.slice(numbers + 1);
      const c = a.slice(0, numbers);
      console.log('tcx2', b, c);
      console.log('tcxB', info.node._reactInternalFiber.pendingProps.tcxB);
      console.log(info.node._reactInternalFiber.pendingProps.title);
      const name = info.node._reactInternalFiber.pendingProps.title.props.children[0].props.children;
      const { disabled, parentPath, path } = info.node._reactInternalFiber.pendingProps.tcxB;
      const { title } = info.node._reactInternalFiber.pendingProps;
      console.log(info, 'tcxB', selectedKeys);
      console.log(info.node._reactInternalFiber.pendingProps);
      this.setState({
        selectedKeysB: a,
        pathB: path,
        parentPathB: parentPath,
        disablex: disabled,
        cidB: b,
        titleB: title,
        targetRobotIdB: c,
      });
      this.props.terrNodeId(a, name, info.node.props.tcxB.path);
    }
  };

  // 共享知识点
  renderTreeNodesB(data) {
    const that = this;
    return data.map(item => {
      // disabled

      function status(id,name) {
        return (
          <div className={styles.menuItem}>
            {/* <img src={menuImg} alt="" height={16} className={styles.tool} /> */}
            <span className={styles.menuTitle}>{item.text}</span>
            { item.data.sharedTime && item.children.length ==0?<Tag color="#2db7f5" style={{marginLeft:5}}>{moment(parseInt(item.data.sharedTime)).format('YYYY-MM-DD')}</Tag>:''}
            <Dropdown overlay={(e)=>that.getMenu(id,name)} trigger={['click']} className={styles.menuGroup} placement="bottomLeft">
              <img src={menuImg} height={18} style={{marginLeft:10}} className={styles.tool} />
            </Dropdown>
          </div>
        );
      }
      if (item.children) {
        if (item.data.disabled) {
          return (
            <TreeNode className="glo" title={that.renderMenu(item.id,item.text)} key={item.id} tcxB={item.data}>
              {this.renderTreeNodesB(item.children)}
            </TreeNode>
          );
        } 
          return (
            <TreeNode title={that.renderMenu(item.id,item.text)} key={item.id} tcxB={item.data}>
              {this.renderTreeNodesB(item.children)}
            </TreeNode>
          );
        
      }
      // return <TreeNode title={that.renderMenu(item.id,item.text)} key={item.id} tcxB={item.data} />;
      return (
        <div>
          <TreeNode title={that.renderMenu(item.id,item.text)} key={item.id} tcxB={item.data} />
          <Icon type="file-text" theme="filled" style={{fontSize:15,color:"skyblue"}} />
        </div>
      );
    });
  }

  // <TreeNodes value="parent 1" title="parent 1" key="0-1"></TreeNodes>
  move(data) {
    return data.map(item => {
      if (item.children) {
        if (item.data.disabled) {
          return (
            <TreeNodes
              className="glo"
              value={item.text}
              title={item.text}
              key={item.id}
              tcx={item.data}
            >
              {this.move(item.children)}
            </TreeNodes>
          );
        } 
          return (
            <TreeNodes value={item.text} title={item.text} key={item.id} tcx={item.data}>
              {this.move(item.children)}
            </TreeNodes>
          );
        
      }
      return <TreeNodes value={item.text} title={item.text} key={item.id} tcx={item.data} />;
    });
  }

  onCheck = (checkedKeys, info) => {
    console.log('onCheck', checkedKeys);
    this.setState({ checkedKeys });
  };

  unfoldIcon = () => {
    // 显示
    this.setState({ iconJudge: false });
  };

  hiddenIcon = () => {
    // 隐藏
    this.setState({ iconJudge: true });
    console.log('2');
  };

  deleteCategory = () => {
    // 删 除
    const { dispatch } = this.props;
    const { path } = this.state;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'leftTree/fetchb',
        payload: { path },
        callback: res => {
          console.log('删除节点', res);
          if (res.code === 0) {
            message.success(`${res.msg}`);
            this.fetch();
          }
        },
      });
    });
  };

  upOrDownCategory = number => {
    // 上移
    const { dispatch } = this.props;
    const { path } = this.state;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'leftTree/upOrDownCategory',
        payload: { path, type: number },
        callback: res => {
          console.log('节点上移', res);
          if (res.code === 0) {
            message.success(`${res.msg}`);
            this.fetch();
          }
        },
      });
    });
  };

  disableCategory = () => {
    // 禁用/启用分类
    const { dispatch } = this.props;
    const { path } = this.state;
    if (this.state.disabled) {
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'leftTree/fetchc',
          payload: { targetRobotId: this.state.targetRobotId, categoryId: this.state.cid },
          callback: res => {
            console.log('禁用', res);
            if (res.code === 0) {
              this.props.refresh(1);
              message.success(`${res.msg}`);
              this.setState({ disabled: false });
              this.fetch();
            }
          },
        });
      });
    }
    if (!this.state.disabled) {
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'leftTree/fetchcs',
          payload: { targetRobotId: this.state.targetRobotId, categoryId: this.state.cid },
          callback: res => {
            this.props.refresh(2);
            console.log('禁用', res);
            if (res.code === 0) {
              message.success(`${res.msg}`);
              this.setState({ disabled: true });
              this.fetch();
            }
          },
        });
      });
    }
  };

  disableCategoryB = () => {
    // 共享知识点 禁用/启用分类
    const { dispatch } = this.props;
    const { pathB } = this.state;
    if (this.state.disablex) {
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'leftTree/fetchc',
          payload: { targetRobotId: this.state.targetRobotIdB, categoryId: this.state.cidB },
          callback: res => {
            console.log('禁用', res);
            if (res.code === 0) {
              this.props.refresh(3);
              message.success(`${res.msg}`);
              this.setState({ disablex: false });
              this.fetch();
            }
          },
        });
      });
    }
    if (!this.state.disablex) {
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'leftTree/fetchcs',
          payload: { targetRobotId: this.state.targetRobotIdB, categoryId: this.state.cidB },
          callback: res => {
            this.props.refresh(4);
            console.log('禁用', res);
            if (res.code === 0) {
              message.success(`${res.msg}`);
              this.setState({ disablex: true });
              this.fetch();
            }
          },
        });
      });
    }
  };

  businessWay = () => {
    // 修改节点名
    const userInfo = this.props.form.getFieldsValue();
    this.props.form.validateFields((err, values) => {
      console.log(userInfo);
      const { dispatch } = this.props;
      const { parentPath, cid } = this.state;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'leftTree/ClassifyName',
          payload: { name: userInfo.businessName, parentPath, cid },
          callback: res => {
            console.log('修改节点名', res);
            if (res.code === 0) {
              this.props.form.setFields({ businessName: '' });
              this.props.form.setFields({ addName: '' });
              message.success(`${res.msg}`);
              this.setState({ showModel: false, title: userInfo.businessName });
              this.fetch();
            }
          },
        });
      });
      if (!err) {
      }
    });
  };

  // 移动分类
  onChangemove = (value, node, extra) => {
    console.log(value, extra.triggerNode.props.tcx.parentPath);
    this.setState({ value, parentPathMove: extra.triggerNode.props.tcx.parentPath });
  };

  moveCategory = () => {
    const { path } = this.state;
    this.setState({ value: '' });
    if (path === '' || path === undefined) {
      message.error('您还未选择需要移动的节点');
    } else {
      console.log('我是移动', path);
      this.setState({ moveShow: true });
    }
  };

  moveShowmove = () => {
    console.log('222');
    const { dispatch } = this.props;

    const { yidongid, cid } = this.state;
    const numbers = yidongid.lastIndexOf('-');
    const b = yidongid.slice(numbers + 1);
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'leftTree/moveClassify',
        payload: { pid: b, cid },
        callback: res => {
          console.log('移动', res);
          if (res.code === 0) {
            message.success(`${res.msg}`);
            this.setState({ moveShow: false, value: '' });
            this.fetch();
          }
        },
      });
    });
  };

  revisionName = () => {
    const { selectedKeys } = this.state;
    if (selectedKeys) {
      this.setState({ showModel: true });
    } else {
      message.error('您还未选择需要修改名称的节点');
    }
  };

  addName = () => {
    // 添加分类名 addClassify
    const userInfo = this.props.form.getFieldsValue();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(userInfo);
        const str = userInfo.addName;
        const val = str.replace(/\s*/g, '');
        const Regx = /^[A-Za-z0-9\u4e00-\u9fa5]*$/;
        if (Regx.test(val)) {
          if (val.length < 21) {
            const a = str.replace(/\s*/g, '');
            const { dispatch } = this.props;
            const { path, cid } = this.state;
            this.reqRef = requestAnimationFrame(() => {
              dispatch({
                type: 'leftTree/addClassify',
                payload: { category: a, parentPath: path },
                callback: res => {
                  console.log('新增节点名', res);
                  if (res.code === 0) {
                    this.props.form.setFields({ addName: '' });
                    message.success(`${res.msg}`);
                    this.setState({ showModelA: false });
                    this.fetch();
                  }
                },
              });
            });
          } else {
            message.error('分类名称不能为空，不能含有特殊字符，且长度不大于20！操作失败');
          }
        } else {
          message.error('分类名称不能为空，不能含有特殊字符，且长度不大于20！操作失败');
        }
      }
    });
  };

  addsName = (id) => {
    const { selectedKeys } = this.state;
    this.setState({
      selectedKeys:id
    },()=>{
      if (id) {
        this.setState({ showModelA: true });
      } else {
        message.error('您还未选择需要添加分类的节点');
      }
    })
  };

  cancelTheShared = () => {
    console.log('取消共享');
    const { selectedKeysB } = this.state;
    if (selectedKeysB === null) {
      message.error('请选择需要取消共享的一项');
    } else {
      const { dispatch } = this.props;
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'leftTree/deleteSharedCategory',
          payload: { sharedCategoryId: selectedKeysB },
          callback: res => {
            console.log('取消共享', res);
            if (res.code === 0) {
              message.success(`${res.msg}`);
              this.fetch();
            }
          },
        });
      });
    }
  };

  searchClassForClassify=(e)=>{
    console.log(e.target.value)
  };

  treeSearchOnChange = e =>{
    const { dataList,dataTree } = this.state;
    console.log(dataList)
    const { value } = e.target;
    const expandedKeys = dataList
      .map(item => {
        if (item.text.indexOf(value) > -1) {
          return this.getParentKey(item.text, dataTree);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    this.setState({
      expandedKeys,
      searchValue: value,
      autoExpandParent: true,
    });
  };

  getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
      const node = tree[i];
      if (node.children) {
        if (node.children.some(item => item.text === key)) {
          parentKey = node.text;
        } else if (this.getParentKey(key, node.children)) {
          parentKey = this.getParentKey(key, node.children);
        }
      }
    }
    return parentKey;
  };

  onExpand = expandedKeys => {
    this.setState({
      expandedKeys,
      autoExpandParent: false,
    });
  };

  generateList = data => {
    const { dataList } = this.state;
    for (let i = 0; i < data.length; i++) {
      const node = data[i];
      const newNode = {
        text:node.text,
        id:node.id
      };
      dataList.push(newNode);
      this.setState({
        dataList
      });
      if (node.children) {
        this.generateList(node.children);
      }
    }
  };

  // eslint-disable-next-line react/sort-comp
  render() {
    const { iconJudge,dataList,dataTree,expandedKeys, autoExpandParent } = this.state;
    const { getFieldDecorator } = this.props.form;
    const FormItemLayont = {
      labelCol: {
        xs: 24,
        sm: 5,
      },
      wrapperCol: {
        xs: 24,
        sm: 19,
      },
    };
    const buttonDJ = this.state.buttonDJ ? { pointerEvents: 'none', opacity: '0.5' } : null;
    const buttonNonew = this.state.buttonNonew ? { pointerEvents: 'none', opacity: '0.5' } : null;
    return (
      <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        <div style={{  height: 50}}>
          {/* <Search placeholder="请输入搜索内容"/> */}
          <Input
            className={styles.inputSearch}
            placeholder="请输入搜索内容"
            suffix={
              <img src={searchImg} style={{cursor:"pointer",width:20}} alt="" />
            }
            onPressEnter={this.searchClassForClassify}
            onChange={this.treeSearchOnChange}
          />
          <a style={{marginLeft:8}} onClick={this.addsName}>
            <Icon type="plus-circle" style={{fontSize:'22px',color:'#4A90E2'}} />
          </a>
          <a style={{marginLeft:8}} onClick={this.moveCategory}>
            <Icon type="drag" style={{fontSize:'22px',color:'#4A90E2'}} />
            {/* <img src={ydImg} /> */}
          </a>
        </div>
        <div>
          <span style={{ paddingTop: 2, fontWeight: 600 }}>个人知识库</span>
        </div>
        <Spin className={styles.spin} spinning={this.state.login}>
          {this.state.dataTree.length === 0 ? null : (
            <Tree
              onSelect={this.onSelect}
              onExpand={this.onExpand}
              expandedKeys={expandedKeys}
              autoExpandParent={autoExpandParent}
              showIcon
              switcherIcon={<Icon type="caret-down" theme="filled" style={{color:'#6093ea',fontSize:20}} />}
            >
              {this.renderTreeNodes(this.state.dataTree)}
            </Tree>
          )}
        </Spin>
        <Modal
          className="modelZdy"
          title="修改节点名称"
          visible={this.state.showModel}
          okText={<FormattedMessage id="app.customDictionary.save" />}
          cancelText={<FormattedMessage id="app.customDictionary.cancel" />}
          onCancel={() => {
            this.props.form.setFields({ businessName: '' });
            this.setState({ showModel: false });
          }}
          onOk={this.businessWay} // 确定方法开出去
        >
          <Form layout="horizontal">
            <FormItem label="新节点名" onSubmit={this.coreWordOne} {...FormItemLayont}>
              {getFieldDecorator('businessName', {
                initialValue: this.state.title,
                rules: [{ required: true, message: '节点名不能为空' }],
              })(<Input onPressEnter={this.businessWay} />)}
            </FormItem>
          </Form>
        </Modal>
        <Modal
          className="modelZdy"
          title="添加分类"
          visible={this.state.showModelA}
          okText={<FormattedMessage id="app.customDictionary.save" />}
          cancelText={<FormattedMessage id="app.customDictionary.cancel" />}
          onCancel={() => {
            this.props.form.setFields({ addName: '' });
            this.setState({ showModelA: false });
          }}
          onOk={this.addName} // 确定方法开出去
        >
          <Form layout="horizontal">
            <FormItem label="添加分类名" onSubmit={this.coreWordOne} {...FormItemLayont}>
              {getFieldDecorator('addName', {
                initialValue: '',
                rules: [{ required: true, message: '节点名不能为空' }],
              })(<Input onPressEnter={this.addName} />)}
            </FormItem>
          </Form>
        </Modal>
        <Modal
          className="modelZdy"
          title="移动分类"
          visible={this.state.moveShow}
          okText={<FormattedMessage id="app.customDictionary.save" />}
          cancelText={<FormattedMessage id="app.customDictionary.cancel" />}
          onCancel={() => {
            this.props.form.setFields({ addName: '' });
            this.setState({ moveShow: false });
          }}
          onOk={this.moveShowmove} // 确定方法开出去
        >
          <Form layout="horizontal">
            <FormItem label="移动到分类" {...FormItemLayont}>
              <TreeSelect
                showSearch
                style={{ width: 300 }}
                value={this.state.value}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                placeholder=""
                allowClear
                treeDefaultExpandAll
                onChange={this.onChangemove}
                onSelect={this.onSelects}

              >
                {this.move(this.state.dataTree)}
              </TreeSelect>
            </FormItem>
          </Form>
        </Modal>
        {this.state.dataTreeB.length ? (
          <div style={{ marginTop: 10 }}>
            <span style={{ paddingTop: 0, fontWeight: 600, fontSize: 14 }}>共享知识库</span>
            <div
              className={styles.bj}
              style={{ float: 'right', cursor: 'pointer', paddingTop: 1, fontSize: 15 }}
            >
              {/*{
                this.state.disablex === true ? <Tooltip placement="top" title='启用分类' arrowPointAtCenter><Icon onClick={this.disableCategoryB} className={styles.icon} type="play-circle" theme="filled" /></Tooltip> : <Tooltip placement="top" title='停用分类' arrowPointAtCenter> <Icon onClick={this.disableCategoryB} className={styles.icon} type="pause-circle" /></Tooltip>
              }*/}
            </div>
            <div style={{ borderBottom: '1px solid #e6ecf6', marginTop: 15 }} />
          </div>
        ) : null}
        {this.state.dataTreeB.length ? (
          <Spin className={styles.spin} spinning={this.state.login}>
            {this.state.dataTreeB.length === 0 ? null : (
              <Tree
                onSelect={this.onSelectB}
                defaultExpandedKeys={this.state.open}
                showIcon
                switcherIcon={<Icon type="caret-down" theme="filled" style={{color:'#6093ea',fontSize:20}} />}
                // treeDefaultExpandedKeys={['root']}
              >
                {this.renderTreeNodesB(this.state.dataTreeB)}
              </Tree>
            )}
          </Spin>
        ) : null}
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(LeftTree));
